{% extends 'base.html' %}
{% block title %}四Y-注册{% endblock %}
{% block css %}
    <link rel="stylesheet" href="/static/css/register_form-style.css">
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css">

{% endblock %}
{% block headjs %}

{% endblock %}

{% block content-center %}
    <form class="register_form" action="/register/" method="post" autocomplete="off">
        <div class="content_register">
            <h1>注 册</h1>
            <div class="input-box">
                <input tabindex="1" id="username" name="username"
                       type="text" autocomplete="off" required placeholder=""
                       {% if username %}value="{{ username }}"{% endif %}>
                <label for="username">邮箱账号:</label>
            </div>
            <div class="input-box">
                <input tabindex="2" name="password" {% if password %}value="{{ password }}"{% endif %} id="password"
                       type="password" required>
                <label for="password">密码:</label>
            </div>
            <div class="input-box">
                <input tabindex="3" name="re_password" {% if re_pwd %}value="{{ re_pwd }}"{% endif %}
                       id="re_password" type="password" required>
                <label for="password">确认密码:</label>
            </div>
            <div class="input-box" id="check_number">
                <input tabindex="4" name="checkNum" id="checkNum" type="text" required>
                <label for="checkNum">验证码:</label>
                <i class="bi bi-arrow-up-circle"></i>
                <input id="get_CheckNumber" {% if sign %}
                       disabled="disabled"
                {% endif %}  onclick="button_click(this);GetCheckNum(this)" type="button" value="获取验证码">
            </div>
            <p class="error_text">{% if sign %}验证码有误{% elif check is False %}

                您尚未获取验证码{% elif repetition == 'true' %}您的邮箱已被注册!{% endif %}</p>
            <i class="bi bi-person-plus"></i><input tabindex="5" onclick="check_data(this)" type="submit" value="注  册">

        </div>
    </form>


{% endblock %}
{% block body %}
{% endblock %}
{% block footjs %}
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script>
        function check_data(obj) {
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            var username = $('#username').val();
            var password = $('#password').val();
            var re_pwd = $('#re_password').val();
            isok = reg.test(username);
            if (!isok) {
                $(".error_text").html("邮箱格式不正确");
            }

        }
    </script>
    <script>
        var countdown = 60;

        function button_click(obj) {
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            var username = $('#username').val();
            var password = $('#password').val();
            var re_pwd = $('#re_password').val();
            if (username == '' || password == '' || re_pwd == '') {
                $(".error_text").html("账号或密码不能为空");
            } else {
                isok = reg.test(username);
                if (!isok) {
                } else {
                    if (password == re_pwd) {
                        if (password.length < 6) {

                        } else {
                            if (countdown == 0) {
                                obj.removeAttribute("disabled");
                                obj.id = "get_CheckNumber"
                                obj.value = "获取验证码";
                                countdown = 60;
                                return;
                            } else {
                                obj.setAttribute("disabled", true);
                                obj.id = "get_CheckNumber2"
                                obj.value = "重新发送(" + countdown + ")";
                                countdown--;
                                $('.bi-arrow-up-circle').attr('class', 'bi-arrow-up-circle-fill')
                            }
                            setTimeout(function () {
                                button_click(obj)
                            }, 1000)
                        }
                    } else {
                        $(".error_text").html("确认密码不匹配!");
                    }
                }
            }
        }

        function GetCheckNum(obj) {
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            var username = $('#username').val();
            var password = $('#password').val();
            var re_pwd = $('#re_password').val();
            if (username == '' || password == '' || re_pwd == '') {
                $(".error_text").html("账号或密码不能为空");
            } else {
                isok = reg.test(username);
                $(".error_text").html("");
                if (isok) {
                    $(".error_text").html("");
                    if (password == re_pwd) {
                        if (password.length < 6) {
                            $(".error_text").html('密码长度至少为6位数!');
                        } else {
                            $.ajax({
                                url: '/register',
                                type: 'get',
                                dataType: 'JSON',
                                data: {"sign": "click", 'username': username, 'password': password},
                                traditional: true,
                                success: function (result) {
                                    if (result.flag) {
                                        $(".error_text").html("发送成功!");
                                    } else {
                                        $(".error_text").html("发送失败!请检查邮箱号");
                                        {#console.log(111);#}
                                        {#console.log(result.flag);#}
                                        {#error();#}
                                    }
                                }
                            });
                        }
                    } else {
                        $(".error_text").html('确认密码不匹配!');
                    }
                } else {
                    {#console.log(isok);#}
                    $(".error_text").html('邮箱格式有误!');
                }
            }
        }

        function error() {
            $(".error_text").html('验证码发送失败，您的邮箱有误!');
        }
    </script>
{% endblock %}